<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>抽奖</title>
	<link rel="stylesheet" href="source/plugin/annual/template/css/reset1.css">
</head>
<body>
	<div class="header w por">
		<div class="open-qr poa"></div>
	</div>
	<div class="text-1 w">
		{$num['num']}人签到
	</div>
	<div class="scrollwrap w">
		<div class="list">
			<ul class="pageone">
               <!--{loop $data $key $value}-->                  
				<li  style="background:url(uc_server/avatar.php?uid={$value['uid']}&size=middle) center center/100% 100% no-repeat;">
				<div content="{$value['name']}:{echo substr_replace($value['phone'],'****','4','4')};" date_id="{echo $i;}"></div></li>
				{eval $i++;}
              <!--{/loop}-->	
			</ul>
			
		</div>
	</div>
	<div class="footer w por"> 
		<div class="header-pic poa"></div>
		<div class="label poa"></div>
		<div class="rand poa"></div>
		<a href="plugin.php?id=annual:board" class="links poa"></a>
	</div>

	<div class="layout-qrcode pof">
		<div class="close poa"></div>
		<img src="source/plugin/annual/template/img/hico13.png" alt="" class="qr poa">
	</div>
	<script src="source/plugin/annual/template/js/jquery-3.1.0.min.js"></script>
	<script src="source/plugin/annual/template/js/jquery.nicescroll.js"></script>
	<script>
       
      
        
    
		function rand(max,min){
			if(min){
				return Math.round(Math.random()*(max-min))+min;
			}else{
				return Math.round(Math.random()*max);	
			}	
		}
		function rand_ani() {
			  var li_height=$('.list .pageone li').height();
			  var tem=dom.removeClass('active').eq(rand(length)).addClass('active');
			  var num=parseInt(tem.attr('date_id')/10);
			  if(num==0){
                  num=1;
			  }
			 $('.list').scrollTop(num*li_height);
			 $('.label').text(tem.attr('content'));
			 $('.header-pic').attr('style', dem.removeClass('active').eq(rand(length)).addClass('active').attr('style'));
		}
		// function order(index) {
		// 	var index = $('.list .pageone').eq(page).children('div').children('li.active').index();
		// 	console.log(index);
		// 	time = setInterval(function(){
		// 		if(index>=length){
		// 			index =0;
		// 			if (page>=$('.list .pageone').length-1) {
		// 				page = 0;
		// 			}else{
		// 				page ++;
		// 			}
		// 			dom = $('.list .pageone').eq(page).children('div');
		// 			$('.list').css({
		// 				'-webkit-transform': 'translate3d('+'-'+$('.list').width()*page+'px, 0px, 0px)',
		// 				'-moz-transform': 'translate3d('+'-'+$('.list').width()*page+'px, 0px, 0px)',
		// 				'-ms-transform': 'translate3d('+'-'+$('.list').width()*page+'px, 0px, 0px)',
		// 				'-o-transform': 'translate3d('+'-'+$('.list').width()*page+'px, 0px, 0px)',
		// 				'transform': 'translate3d('+'-'+$('.list').width()*page+'px, 0px, 0px)',
		// 			});
		// 		}else{
		// 			index++;
		// 		}
		// 		console.log(dom);

		// 		$('.label').text(dom.attr('content'));
		// 		$('.header-pic').css('background-image', dom.siblings('active').css('background-image'));
		// 	  dom.eq(index).addClass('active').siblings('class').removeClass('active');
		// 	 },ani_time)
		// }

		function auto(){
			var height = window.innerHeight/100*3;
			$('.header').css({
				'padding-top':height,
				'padding-bottom':height
			});
			$('.footer').css({
				'margin-top':height,
			});
			$('.text-1').css({
				'font-size':$('.text-1').height()*0.8,
			});
			$('.open-qr').css({
				'top':height,
				'bottom':height,
			});

			$('.footer .label').css({
				'font-size':$('.footer .label').height()*0.3,
				'line-height':$('.footer .label').height()+'px',
			});
		}
		auto()
		$(window).resize(auto);
		$('.layout-qrcode .close').click(function() {
			$(this).parent().fadeToggle();
		});
		$('.open-qr').click(function() {
			$('.layout-qrcode').fadeToggle();
		});

		var page = 0;
		var dom = $('.list .pageone').eq(page).children('li').children('div');
		var dem=$('.list .pageone').eq(page).children('li');
		var length = dem.length-1;
		var time = '';
		var ani_time = 1000;
		$('.rand').data('click-order', 1);
		$('.rand').on('click', function() {
			$(this).trigger('click'+$('.rand').data('click-order'));
			$('.rand').data('click-order',$('.rand').data('click-order')+1);
		});
		$('.rand').on('click1', function() {
			//alert($(this).data('click-order'));
			rand_ani();
			$(this).addClass('stop');
			time = setInterval(rand_ani,ani_time)
		});
		// $('.rand').on('click2', function() {
		// 	// alert($(this).data('click-order'));
		// 	
		// 	clearInterval(time);
			
		// 	order();
		// });
		$('.rand').on('click2', function() {
			// alert($(this).data('click-order'));
			$(this).removeClass('stop');
			$(this).data('click-order',0);
			clearInterval(time);
		});
   
      $('.list').niceScroll({               
                cursoropacitymax: 0, //
            });

	</script>
</body>
</html>

